React Ref pārsūtīšanas paterni: Komponentu API dizaina meistarība

Ref pārsūtīšana ir spēcīga tehnika React, kas ļauj automātiski nodot ref caur komponentu vienam no tā bērniem. Tas ļauj vecākkomponentiem tieši mijiedarboties ar konkrētiem DOM elementiem vai komponentu instancēm to bērnos, pat ja šie bērni ir dziļi ligzdoti. Ref pārsūtīšanas izpratne un efektīva izmantošana ir būtiska, lai veidotu elastīgas, atkārtoti lietojamas un uzturamas komponentu API.

Kāpēc Ref pārsūtīšana ir svarīga komponentu API dizainā

Projektējot React komponentus, īpaši tos, kas paredzēti atkārtotai lietošanai, ir svarīgi apsvērt, kā citi izstrādātāji ar tiem mijiedarbosies. Labi izstrādāts komponenta API ir:

• Intuitīvs: Viegli saprotams un lietojams.
• Elastīgs: Pielāgojams dažādiem lietošanas gadījumiem, neprasot būtiskas modifikācijas.
• Uzturams: Izmaiņām komponenta iekšējā implementācijā nevajadzētu salauzt ārējo kodu, kas to izmanto.

Ref pārsūtīšanai ir galvenā loma šo mērķu sasniegšanā. Tā ļauj jums atklāt noteiktas jūsu komponenta iekšējās struktūras daļas ārpasaulē, vienlaikus saglabājot kontroli pār komponenta iekšējo implementāciju.

React.forwardRef pamati

React ref pārsūtīšanas pamatā ir React.forwardRef augstākas kārtas komponents (HOC). Šī funkcija kā argumentu pieņem renderēšanas funkciju un atgriež jaunu React komponentu, kas var saņemt ref prop.

Šeit ir vienkāršs piemērs:

            import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} type="text" {...props} />;
});

export default MyInput;

            

              
                Copy
              
            
          

Šajā piemērā MyInput ir funkcionāls komponents, kas izmanto forwardRef. ref props, kas nodots MyInput, tiek tieši piešķirts input elementam. Tas ļauj vecākkomponentam iegūt atsauci uz ievades lauka faktisko DOM mezglu.

Pārsūtītā Ref izmantošana

Šādi jūs varētu izmantot MyInput komponentu vecākkomponentā:

            import React, { useRef, useEffect } from 'react';
import MyInput from './MyInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <MyInput ref={inputRef} placeholder="Enter text" />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Šajā piemērā ParentComponent izveido ref, izmantojot useRef, un nodod to MyInput komponentam. useEffect āķis (hook) pēc tam izmanto ref, lai fokusētu ievades lauku, kad komponents tiek uzmontēts. Tas parāda, kā vecākkomponents var tieši manipulēt ar DOM elementu tā bērna komponentā, izmantojot ref pārsūtīšanu.

Biežākie Ref pārsūtīšanas paterni komponentu API dizainam

Tagad izpētīsim dažus biežus un noderīgus ref pārsūtīšanas paternus, kas var ievērojami uzlabot jūsu komponentu API dizainu.

1. Ref pārsūtīšana uz DOM elementiem

Kā redzams iepriekšējā pamatpiemērā, ref pārsūtīšana uz DOM elementiem ir fundamentāls paterns. Tas ļauj vecākkomponentiem piekļūt un manipulēt ar konkrētiem DOM mezgliem jūsu komponentā. Tas ir īpaši noderīgi, lai:

• Fokusa pārvaldība: Fokusa iestatīšana ievades laukam vai citam interaktīvam elementam.
• Elementu izmēru mērīšana: Elementa platuma vai augstuma iegūšana.
• Piekļuve elementa īpašībām: Elementu atribūtu lasīšana vai modificēšana.

Piemērs: Pielāgojams pogas komponents

Apsveriet pogas komponentu, kas ļauj lietotājiem pielāgot tā izskatu.

            import React, { forwardRef } from 'react';

const CustomButton = forwardRef((props, ref) => {
  const { children, ...rest } = props;
  return (
    <button ref={ref} className="custom-button" {...rest}>
      {children}
    </button>
  );
});

export default CustomButton;

            

              
                Copy
              
            
          

Vecākkomponents tagad var iegūt atsauci uz pogas elementu un veikt darbības, piemēram, programmatiski to noklikšķināt vai mainīt tā stilu.

2. Ref pārsūtīšana uz bērnu komponentiem

Ref pārsūtīšana neaprobežojas tikai ar DOM elementiem. Jūs varat arī pārsūtīt ref uz citiem React komponentiem. Tas ļauj vecākkomponentiem piekļūt bērnu komponentu instances metodēm vai īpašībām.

Piemērs: Kontrolēts ievades komponents

Iedomājieties, ka jums ir pielāgots ievades komponents, kas pārvalda savu stāvokli. Jūs varētu vēlēties atklāt metodi, lai programmatiski notīrītu ievades vērtību.

            import React, { useState, forwardRef, useImperativeHandle } from 'react';

const ControlledInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  const clearInput = () => {
    setValue('');
  };

  useImperativeHandle(ref, () => ({
    clear: clearInput,
  }));

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
});

export default ControlledInput;

            

              
                Copy
              
            
          

Šajā piemērā tiek izmantots useImperativeHandle, lai atklātu clear metodi vecākkomponentam. Vecākkomponents pēc tam var izsaukt šo metodi, lai notīrītu ievades vērtību.

            import React, { useRef } from 'react';
import ControlledInput from './ControlledInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  const handleClearClick = () => {
    if (inputRef.current) {
      inputRef.current.clear();
    }
  };

  return (
    <div>
      <ControlledInput ref={inputRef} />
      <button onClick={handleClearClick}>Clear</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Šis paterns ir noderīgs, kad nepieciešams atklāt noteiktu bērna komponenta funkcionalitāti tā vecākkomponentam, vienlaikus saglabājot kontroli pār bērna iekšējo stāvokli.

3. Ref apvienošana sarežģītiem komponentiem

Sarežģītākos komponentos jums varētu būt nepieciešams pārsūtīt vairākus ref uz dažādiem elementiem vai komponentiem jūsu komponentā. To var panākt, apvienojot ref, izmantojot pielāgotu funkciju.

Piemērs: Salikts komponents ar vairākiem fokusējamiem elementiem

Pieņemsim, ka jums ir komponents, kas satur gan ievades lauku, gan pogu. Jūs vēlaties ļaut vecākkomponentam fokusēt vai nu ievades lauku, vai pogu.

            import React, { useRef, forwardRef, useEffect } from 'react';

const CompositeComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const buttonRef = useRef(null);

  useEffect(() => {
    if (typeof ref === 'function') {
      ref({
        input: inputRef.current,
        button: buttonRef.current,
      });
    } else if (ref && typeof ref === 'object') {
      ref.current = {
        input: inputRef.current,
        button: buttonRef.current,
      };
    }
  }, [ref]);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button ref={buttonRef}>Click Me</button>
    </div>
  );
});

export default CompositeComponent;

            

              
                Copy
              
            
          

Šajā piemērā CompositeComponent izmanto divus iekšējos ref, inputRef un buttonRef. useEffect āķis pēc tam apvieno šos ref vienā objektā un piešķir to pārsūtītajam ref. Tas ļauj vecākkomponentam piekļūt gan ievades laukam, gan pogai.

            import React, { useRef } from 'react';
import CompositeComponent from './CompositeComponent';

const ParentComponent = () => {
  const compositeRef = useRef(null);

  const handleFocusInput = () => {
    if (compositeRef.current && compositeRef.current.input) {
      compositeRef.current.input.focus();
    }
  };

  const handleFocusButton = () => {
    if (compositeRef.current && compositeRef.current.button) {
      compositeRef.current.button.focus();
    }
  };

  return (
    <div>
      <CompositeComponent ref={compositeRef} />
      <button onClick={handleFocusInput}>Focus Input</button>
      <button onClick={handleFocusButton}>Focus Button</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Šis paterns ir noderīgs, kad nepieciešams atklāt vairākus elementus vai komponentus sarežģītā komponentā vecākkomponentam.

4. Nosacījuma Ref pārsūtīšana

Dažreiz jūs varētu vēlēties pārsūtīt ref tikai noteiktos apstākļos. Tas var būt noderīgi, ja vēlaties nodrošināt noklusējuma uzvedību, bet ļaut vecākkomponentam to ignorēt.

Piemērs: Komponents ar izvēles ievades lauku

Pieņemsim, ka jums ir komponents, kas renderē ievades lauku tikai tad, ja ir iestatīts noteikts props. Jūs vēlaties pārsūtīt ref tikai tad, ja ievades lauks faktiski tiek renderēts.

            import React, { forwardRef } from 'react';

const ConditionalInput = forwardRef((props, ref) => {
  const { showInput, ...rest } = props;

  if (showInput) {
    return <input ref={ref} type="text" {...rest} />;
  } else {
    return <div>No input field</div>;
  }
});

export default ConditionalInput;

            

              
                Copy
              
            
          

Šajā piemērā ref tiek pārsūtīts uz input elementu tikai tad, ja showInput props ir patiess. Pretējā gadījumā ref tiek ignorēts.

5. Ref pārsūtīšana ar augstākas kārtas komponentiem (HOCs)

Lietojot augstākas kārtas komponentus (HOCs), ir svarīgi nodrošināt, ka ref tiek pareizi pārsūtīti uz ietverto komponentu. Ja jūs neapstrādājat ref pareizi, vecākkomponents var nespēt piekļūt pamatā esošajam komponentam.

Piemērs: Vienkāršs HOC apmales pievienošanai

            import React, { forwardRef } from 'react';

const withBorder = (WrappedComponent) => {
  const WithBorder = forwardRef((props, ref) => {
    return (
      <div style={{ border: '1px solid black' }}>
        <WrappedComponent ref={ref} {...props} />
      </div>
    );
  });

  WithBorder.displayName = `withBorder(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithBorder;
};

export default withBorder;

            

              
                Copy
              
            
          

Šajā piemērā withBorder HOC izmanto forwardRef, lai nodrošinātu, ka ref tiek nodots ietvertajam komponentam. displayName īpašība tiek arī iestatīta, lai atvieglotu atkļūdošanu.

Svarīga piezīme: Lietojot klašu komponentus ar HOCs un ref pārsūtīšanu, ref tiks nodots kā parasts props klašu komponentam. Jums būs jāpiekļūst tam, izmantojot this.props.ref.

Labākās prakses Ref pārsūtīšanai

Lai nodrošinātu, ka jūs efektīvi izmantojat ref pārsūtīšanu, apsveriet šādas labākās prakses:

• Izmantojiet React.forwardRef komponentiem, kam nepieciešams pārsūtīt ref. Tas ir standarta veids, kā iespējot ref pārsūtīšanu React.
• Skaidri dokumentējiet savu komponentu API. Paskaidrojiet, kuriem elementiem vai komponentiem var piekļūt, izmantojot ref, un kā tos izmantot.
• Esiet uzmanīgi ar veiktspēju. Izvairieties no nevajadzīgas ref pārsūtīšanas, jo tā var radīt papildu slodzi.
• Izmantojiet useImperativeHandle, lai atklātu ierobežotu metožu vai īpašību kopu. Tas ļauj jums kontrolēt, kam vecākkomponents var piekļūt.
• Izvairieties no pārmērīgas ref pārsūtīšanas izmantošanas. Daudzos gadījumos labāk ir izmantot props, lai sazinātos starp komponentiem.

Pieejamības apsvērumi

Lietojot ref pārsūtīšanu, ir svarīgi ņemt vērā pieejamību. Nodrošiniet, lai jūsu komponenti joprojām būtu pieejami lietotājiem ar invaliditāti, pat ja ref tiek izmantoti DOM elementu manipulēšanai. Šeit ir daži padomi:

• Izmantojiet ARIA atribūtus, lai sniegtu semantisku informāciju. Tas palīdz palīgtehnoloģijām saprast jūsu komponentu mērķi.
• Pārvaldiet fokusu pareizi. Nodrošiniet, lai fokuss vienmēr būtu redzams un paredzams.
• Pārbaudiet savus komponentus ar palīgtehnoloģijām. Tas ir labākais veids, kā identificēt un novērst pieejamības problēmas.

Internacionalizācija un lokalizācija

Projektējot komponentu API globālai auditorijai, apsveriet internacionalizāciju (i18n) un lokalizāciju (l10n). Nodrošiniet, lai jūsu komponentus varētu viegli tulkot dažādās valodās un pielāgot dažādiem kultūras kontekstiem. Šeit ir daži padomi:

• Izmantojiet bibliotēku i18n un l10n. Ir pieejamas daudzas lieliskas bibliotēkas, piemēram, react-intl un i18next.
• Eksternalizējiet visu tekstu. Neierakstiet teksta virknes cietajā kodā savos komponentos.
• Atbalstiet dažādus datuma un skaitļu formātus. Pielāgojiet savus komponentus lietotāja lokalizācijai.
• Apsveriet no labās puses uz kreiso (RTL) izkārtojumus. Dažas valodas, piemēram, arābu un ivrits, tiek rakstītas no labās puses uz kreiso.

Piemēri no visas pasaules

Apskatīsim dažus piemērus, kā ref pārsūtīšanu var izmantot dažādos kontekstos visā pasaulē:

• E-komercijas lietojumprogrammās: Ref pārsūtīšanu var izmantot, lai fokusētu meklēšanas ievades lauku, kad lietotājs pāriet uz meklēšanas lapu, uzlabojot lietotāja pieredzi pircējiem visā pasaulē.
• Datu vizualizācijas bibliotēkās: Ref pārsūtīšanu var izmantot, lai piekļūtu diagrammu un grafiku pamatā esošajiem DOM elementiem, ļaujot izstrādātājiem pielāgot to izskatu un uzvedību, pamatojoties uz reģionālajiem datu standartiem.
• Formu bibliotēkās: Ref pārsūtīšanu var izmantot, lai nodrošinātu programmatisku kontroli pār ievades laukiem, piemēram, to notīrīšanu vai validāciju, kas ir īpaši noderīgi lietojumprogrammās, kurām jāatbilst dažādiem datu privātuma noteikumiem dažādās valstīs.

Noslēgums

Ref pārsūtīšana ir spēcīgs rīks elastīgu un uzturamu React komponentu API izstrādei. Izprotot un izmantojot šajā rakstā apskatītos paternus, jūs varat izveidot komponentus, kas ir viegli lietojami, pielāgojami dažādiem lietošanas gadījumiem un izturīgi pret izmaiņām. Atcerieties ņemt vērā pieejamību un internacionalizāciju, projektējot savus komponentus, lai nodrošinātu, ka tie ir lietojami globālai auditorijai.

Apgūstot ref pārsūtīšanu un citas progresīvas React tehnikas, jūs varat kļūt par efektīvāku un vērtīgāku React izstrādātāju. Turpiniet pētīt, eksperimentēt un pilnveidot savas prasmes, lai veidotu pārsteidzošas lietotāja saskarnes, kas priecē lietotājus visā pasaulē.